<template>
  <div class="header_ref">
    <div class="tabs_box">
      <ul>
        <li v-for="p in classList" :key="p.id" :class="{ active: classType === p.id }" @click="classChange(p.id)">
          {{ p.name }}
        </li>
      </ul>
    </div>
    <div class="search">
      <el-input clearable placeholder="按名称搜索" prefix-icon="el-icon-search" v-model="searchText"
                @keydown.enter="searchHandle"/>
    </div>
    <div class="btns">
      <input hidden type="file" ref="uploadRef" @change="upload" multiple accept=".docx,.doc,.pdf">
      <el-dropdown @command="handleCommand">
        <el-button round><span>添加练习</span><i class="el-icon-caret-bottom"/></el-button>
        <template #dropdown>
          <el-dropdown-menu>
              <el-dropdown-item v-permissions="dropdown.permission" :command="dropdown" v-for="dropdown in dropdownMenu" :key="dropdown">
                <template #default>
                  <span>{{ dropdown.p }}</span>
                </template>
              </el-dropdown-item>
          </el-dropdown-menu>
        </template>
      </el-dropdown>
    </div>
  </div>
</template>
<script lang="ts">
import {ref} from 'vue';
import NewExerciseComponent from './new-exercise.vue';

import $ from '$';
import {ElMessage} from 'element-plus';

export default {
  setup(props, {emit}) {
    let classType = ref(null);
    let classList = [{name: '同步练习', id: null}];
    let dropdownMenu = [{command: 'upload', p: '上传练习', permission: 'upload'}, {
      command: 'artificial',
      p: '新建练习',
      permission: 'create',
      type: 1
    }]
    const classChange = (e) => {
      classType.value = e;
      emit('type-change', e)
    };

    let searchText = ref('');
    const searchHandle = () => emit('search', searchText.value);

    const addPaper = (command) => {
      $.modal.create({
        title: command.p,
        width: 640,
        component: NewExerciseComponent,
        props: {paperType: command.type}
      }).then(res => {
        typeof res === 'function' && res();
      })
    }

    let uploadRef = ref();
    const upload = () => {
      let files: File[] = Array.from(uploadRef.value.files);
      uploadRef.value.value = '';
      let accept = ['pdf', 'doc', 'docx', 'pptx'];
      files.filter(file => {
        let idx = file.name.lastIndexOf('.')
        let ext = file.name.substr(idx + 1);
        return accept.includes(ext);
      });
      if (!files.length) {
        ElMessage.warning(`请选择指定${accept.join('、')}格式文件`);
      } else {
        $.modal.create({
          title: '上传试卷',
          width: 480,
          component: NewExerciseComponent,
          props: {files, type: 'update'}
        }).then(res => {
          res && emit('type-change', classType.value);
        })
      }
    };
    const handleCommand = (command) => {
      switch (command.command) {
        case 'upload':
          uploadRef.value.click();
          break;
        default:
          addPaper(command);
          break;
      }
      ;
    }

    return {classType, classList, classChange, searchText, searchHandle, uploadRef, upload, dropdownMenu, handleCommand}
  }
}
</script>
<style lang="scss" scoped>
.header_ref {
  display: flex;
  line-height: 60px;

  .tabs_box {
    li {
      float: left;
      padding: 0 20px;
      color: #fff;
      list-style: none;
      position: relative;
      cursor: pointer;

      &.active::after {
        content: '';
        display: block;
        width: 100%;
        height: 6px;
        background: #FAAD14;
        border-radius: 3px;
        position: absolute;
        bottom: 0;
        left: 50%;
        transform: translateX(-50%);
      }
    }
  }

  .search {
    margin-left: auto;

    :deep(.el-input__prefix),
    :deep(.el-input__suffix) {
      color: #fff !important;
    }

    :deep(input) {
      width: 240px;
      height: 36px;
      color: #fff;
      border: 0;
      border-radius: 18px;
      background: rgba(255, 255, 255, 0.3);

      &::placeholder {
        color: rgba(255, 255, 255, .7);
      }
    }
  }

  .btns {
    margin-left: 30px;

    button {
      color: #72b22a;
      padding: 10px 23px;

      input {
        display: none;
      }
    }
  }
}
</style>
